
<template>
  <div style="padding: 20px">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item >当前位置：</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a >个人中心</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider style="width: 100%"></el-divider>

    <el-row>
      <el-col :span="7" style="text-align: center">
        <el-card style="min-height: 400px;line-height: 20px">
          <el-upload
            class="upload-demo" ref="upload"
            :action="uploadAction"
            :show-file-list="false"
            :headers="{ 'token': token}"
            :on-success="handleAvatarSuccess"
            :limit="1"
            multiple
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="border-radius:100%">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div style="margin-bottom: -20px">
            <el-row>
              <el-col :span="12" style="text-align: left"><div>用户名：</div></el-col>
              <el-col :span="12" style="text-align: right">{{user.username}}</el-col>
            </el-row>
          </div>
          <el-divider style="width: 100%"></el-divider>
          <div style="margin-bottom: -20px">
            <el-row>
              <el-col :span="12" style="text-align: left"><div>角色：</div></el-col>
              <el-col :span="12" style="text-align: right">{{user.name}}</el-col>
            </el-row>
          </div>

          <el-divider style="width: 100%"></el-divider>

        </el-card>
      </el-col>
      <el-col :span="17">
        <el-card>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="个人信息" name="first">
              <el-form :model="user" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="medium">
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="角色" prop="role">
                  <el-input v-model="user.name" :disabled="true"></el-input>
                </el-form-item>

                <el-form-item >
                  <template slot-scope="scope">
                    <el-button type="primary" @click="submit">提交</el-button>
                  </template>
                </el-form-item>

              </el-form>
            </el-tab-pane>
            <el-tab-pane label="密码修改" name="second">
              <el-row :gutter="20" style="margin-bottom:10px">
                <el-col :span="3" style="text-align: right"><div>旧密码</div></el-col>
                <el-col :span="21"><el-input size="normal" v-model="pass"></el-input></el-col>
              </el-row>
              <el-row :gutter="20" style="margin-bottom:10px">
                <el-col :span="3" style="text-align: right"><div>新密码</div></el-col>
                <el-col :span="21"><el-input size="normal" v-model="newpass"></el-input></el-col>
              </el-row>
              <el-row :gutter="20" style="margin-bottom:10px">
                <el-col :span="3" style="text-align: right"><div>重复密码</div></el-col>
                <el-col :span="21"><el-input size="normal" v-model="copypass"></el-input></el-col>
              </el-row>
              <el-button type="primary" style="margin-left: 110px" @click="tijiao">提交</el-button>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import request from "../utils/request";
import axios from "axios";
import {dev as globalConfig} from "../../config";
export default {
  data(){
    return{
      //修改密码
      pass:'',
      copypass:'',
      newpass:'',
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        desription: [
          { required: true, message: '角色', trigger: 'blur' },
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        email: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
        ],
        carid: [
          { required: true, message: '请输入车牌号', trigger: 'blur' },
        ],
      },
      activeName: 'first',
      token:localStorage.getItem(("token")),
      imageUrl:'',
      user: {},
      iflogin:false,
    }
  },
  created() {
    this.iflogin1();

  },
  computed: {
    uploadAction() {
      return 'http://' + globalConfig.host + ':8090/upload/';
    }
  },
  methods: {
    push1(){

    },
    exit(){

    },

    //修改密码
    tijiao(){
      if (this.pass&&this.newpass&&this.copypass){
        if (this.newpass==this.copypass){
          let url='/updatepass'
          let param={
            id:this.user.id,
            password:this.pass,
            username:this.user.username,
            oldPass:this.newpass
          }
          request.post(url,param).then(resp=>{
            if (resp.code===200){
              this.copypass=undefined
              this.pass=undefined
              this.newpass=undefined
              this.$message({
                showClose: true,
                message: resp.errorMessage,
                type: 'success'
              });
            }else{
              this.$message({
                showClose: true,
                message: resp.errorMessage,
                type: 'error'
              });
            }
          }).catch(err=>{
            this.message("密码错误",'error');
          })
        }else {
          this.$message({
            showClose: true,
            message: "两次密码不一致",
            type: 'error'
          });
        }
      }else {
        this.$message({
          showClose: true,
          message: "请输入完整",
          type: 'error'
        });
      }
    },
    //修改信息
    submit(row){
      let url='/updateself'
      request.post(url,this.user).then(resp=>{
        if (resp.code===200){
          this.iflogin1()
          this.$message({
            showClose: true,
            message: resp.errorMessage,
            type: 'success'
          });
        }else{
          this.$message({
            showClose: true,
            message: resp.errorMessage,
            type: 'error'
          });
        }
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isJPG2 = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isJPG && !isJPG2 && !isPNG ) {
        this.$message.warning("只支持jpg或png格式图片");
      }
      if (!isLt5M) {
        this.$message.warning("请上传5MB以内的图片!");
      }

      return (isJPG || isJPG2 || isPNG) && isLt5M;
    },
    handleAvatarSuccess(res, file) {

      this.$refs.upload.clearFiles(); //上传成功之后清除历史记录
      this.$message.success("上传成功");
      console.log(res.data)
      this.imageUrl =res.data ;
      request.post('/updateself',{username: this.user.username,picture:this.imageUrl}).then(resp=>{
          if (resp.code === 200) {
            this.iflogin1()
          }
      })
    },
    login(){

    },
    iflogin1() {
      let url = '/iflogin'
      request.get(url, {
        headers: {
          'content-type': 'application/json',
          "token": localStorage.getItem("token")  //token换成从缓存获取
        }
      }).then(resp => {
        if (resp.code === 200) {

          this.user = resp.data.user
          this.imageUrl=resp.data.user.picture
        } else {
          this.iflogin = false
        }
      })
    },

  }
}
</script>


<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;

}
.el-header {
  background-color: #409EFF;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-footer {
  background-color: #ebebeb;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
